<template>
    <div>
        <Form :option="formOptions" @model="modelValue"></Form>
        <ElButton type="primary" @click="insert">添加</ElButton>
    </div>

    <Table :data="data" :options="options" @curronRow="selRow"></Table>
    <bj></bj>
</template>
<script setup lang="jsx">
import Table from "./components/Table/index.vue"
import Form from "./components/Form/index.vue"
import bj from "./cybj.vue"
import { ElButton } from "element-plus";
import { ref, reactive } from "vue";
const options = [
    {
        field: 'selection'
    },
    {
        label: "序号",
        field: 'index',
        width: '100px'
    },
    {
        label: "姓名",
        field: "name"
    }, {
        label: "年龄",
        field: "age"
    },
    {
        label: "操作",
        field: "action",
        slots: () => {
            return <>
                <ElButton type="text" onClick={test}>查看</ElButton>
                <ElButton type="text">修改</ElButton>
            </>
        }
    }
]

const data = reactive([
    { name: "张三", age: 20 },
    { name: "张三1", age: 21 },
    { name: "张三1", age: 21 }
])

function selRow(row) {
    console.log(row, 42)
}
function test() {
    console.log(123)
}

const formOptions = ref([
    {
        field: "name",
        label: "姓名",
        component: "Input",
        span: 6

    }, {
        field: "age",
        label: "年龄",
        component: "Select",
        componentProps: {
            options: [{ label: "123", value: 1 }, { label: "456", value: 2 }]
        },
        span: 6
    }, {
        field: "sex",
        label: "性别",
        component: "Autocomplete",
        componentProps: {
            searchApi: () => {
                return [
                    { label: "男", value: "男" }, { label: "女", value: "女" }
                ]
            }
        },
        span: 6
    },
    {
        field: "city",
        label: "居住地",
        component: "cascader",
        componentProps: {
            options: [
                {
                    value: '北京',
                    label: '北京',
                    children: [{
                        value: '朝阳',
                        label: '朝阳'
                    }, {
                        value: '海淀',
                        label: '海淀'
                    }
                    ]
                }, {
                    value: "天津",
                    label: "天津",
                    children: [{
                        value: "南开",
                        label: "南开"
                    }, {
                        value: "河西",
                        label: "河西"
                    }]

                }
            ]
        },
        span: 6
    }
])
const formParams = ref({})
function modelValue(val) {
    // console.log(val,63)
    formParams.value = val
}

function insert() {
    console.log("添加")
    console.log(formParams.value, 74)
    data.push(formParams.value)
}
</script>